<template>
  <div id="spitslot" class="list">
    <div class="breadcrumb">
			<Breadcrumb separator=">">
				<BreadcrumbItem to="">运营管理</BreadcrumbItem>
				<BreadcrumbItem to="/operation/spitslot">吐槽列表</BreadcrumbItem>
			</Breadcrumb>
      <div class="btns">
				<ButtonGroup>
	        <Button type="text" @click="exportData"><i class="fa fa-download"></i><span>导出数据</span></Button>
	    	</ButtonGroup>
			</div>
		</div>
    <TableSearch>
      <Form :label-width="80">
        <Row :gutter="16">
          <Col :md="8">
            <FormItem label="驾驶员名称">
              <Input placeholder="请输入驾驶员名称" clearable v-model="driverName"></Input>
            </FormItem>
          </Col>
          <Col :md="8">
            <FormItem label="手机号码">
              <Input placeholder="请输入手机号码" clearable v-model="phone"></Input>
		        </FormItem>
          </Col>
          <Col :md="8">
            <FormItem label="日期">
							<DatePicker v-model="dateRng" type="daterange" placement="bottom-end" placeholder="请选择"></DatePicker>
		        </FormItem>
          </Col>
        </Row>
      </Form>
			<Button type="primary" class="search-btn" icon="search" @click="search" long>查询</Button>
		</TableSearch>

    <div class="table-content">
			<div class="table">
				<table>
					<thead>
						<th>吐槽内容</th>
						<th>吐槽时间</th>
						<th>吐槽人</th>
            <th>手机号码</th>
            <th>操作</th>
					</thead>
					<tbody>
						<tr v-for="(v,i) in pageData.thisPageElements" :key="`spitslot-list-key-${v.id}`">
							<td :title="v.speechContent">{{v.speechContentStr}}</td>
							<td>{{moment(v.insertTime).format('YYYY-MM-DD HH:mm:ss')}}</td>
							<td>{{v.userName}}</td>
              <td>{{v.tel}}</td>
							<td>
								<a @click="openDelete(v)">删除</a>
							</td>
						</tr>
            <tr v-if="!isLoading && pageData.totalNumberOfElements <= 0">
              <td colspan="5">暂无数据</td>
            </tr>
					</tbody>
				</table>
			</div>

			<Page :total="pageData.totalNumberOfElements" :page-size="pageData.pageSize" :current="current" @on-change="loadPage" show-total></Page>
			<Spin size="large" fix v-if="isLoading"></Spin>
		</div>
  </div>
</template>

<script>
  import {mapState,mapActions} from 'vuex'
  import moment                from 'moment'
  import {download}  					 from '@/util/request'

  export default {
    mounted(){

    },
    data(){
      return {
        current:1,
        driverName:'',
        dateRng: [],
        phone:'',
        submitForm:{}
      }
    },
    watch: {
      dateRng([sTime, eTime]) {
        this.submitForm.sTime = sTime ? moment(sTime).format('YYYY-MM-DD') : '';
        this.submitForm.eTime = eTime ? moment(eTime).format('YYYY-MM-DD') : '';
      }
    },
    computed:{
      ...mapState('spitslot/spitslot',['pageData','isLoading'])
    },
    methods:{
      ...mapActions('spitslot/spitslot',['reload','deleteSpitslot']),
      moment,
      search(){
        this.submitForm = {...this.submitForm};
        this.submitForm = {driverName:this.driverName,phone:this.phone,sTime:this.submitForm.sTime,eTime:this.submitForm.eTime};
        this.loadPage(1);
      },
      exportData(){
        download('/spitslot/export',this.submitForm);
      },
      loadPage(i){
        this.current = i;
        this.reload({pageNum:this.current,...this.submitForm});
      },
      deleteLoadPage(){
        let total = this.pageData.totalNumberOfElements - 1;
        let pageSize = parseInt(total / this.pageData.pageSize) + (total % this.pageData.pageSize > 0 ? 1 : 0);
        if (this.current > 1 && this.current > pageSize) {
          this.current--;
        }
        this.loadPage(this.current);
      },
      openDelete(v){
        this.$Modal.confirm({
            title: '删除吐槽',
            content: `是否确定删除 ${v.speechContent}`,
            loading: true,
            onOk:async ()=>{
              let res = await this.deleteSpitslot(v.id);
              if(res.success){
                this.$Modal.remove();
                this.deleteLoadPage();
                this.$Message.success('删除成功');
              }else{
                this.$Modal.remove();
                this.$Message.error(res.msg);
              }
            }
        });
      }
    }
  };
</script>
